<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        img{
            position: relative;
            width: 250px;
            height: 250px;
        }
    </style>
</head>
<body>
    <img src="img/2.jpg" alt="郭老师">
</body>
<script>
    // 1. 获得盒子当前位置
    // 2. 让盒子在当前位置加上1个移动距离
    // 3. 利用定时器不断重复这个操作
    // 4. 加一个结束定时器的条件
    // 5. 注意此元素需要添加定位， 才能使用element.style.left
    var img = document.querySelector('img')
    console.log(img.offsetLeft); 
    // offsetLeft是只读，只能读取元素位置，不能赋值改变他
    // img.offsetLeft = 100
    // 只能通过element.style.left去修改元素样式，让他改变
    // img.style.left = '100px'
    // 让动画停止的本质？？  停止定时器
    // clearInterval(参数) 你要停止的定时器的唯一标识符
    var timer = setInterval(function(){
        if(img.offsetLeft === 600){
            // 停止定时器
            clearInterval(timer)
        }
        img.style.left = img.offsetLeft + 1 + 'px'
    }, 5);
</script>
</html>